<template>
	<view class="container">
		<!-- <button open-type="getPhoneNumber">登录</button> -->
		<!-- <button @tap="login">登录</button> -->
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight" />
		<view class="body">
			<view class="content">
				<view>
					<image src="../../static/images/logo.png" class="logo"></image>
					<view style="text-align: center; color: 5a5960">秦氏京点</view>
				</view>
				<view style="color: #9c9c9d; font-size: 30rpx">还差一步即享会员福利...</view>
			</view>
			<button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="login-btn">手机号快捷登录</button>
		</view>
	</view>
</template>

<script>
import { getPhoneNumber } from '@/api/user.js';
import { login } from '@/utils/login.js';
export default {
	data() {
		return {
			phone: '',
			config: {
				title: '登录中心',
				back: false
			}
		};
	},
	methods: {
		async decryptPhoneNumber(e) {
			const code = e.detail.code;
			console.log('phone code', code);

			const phone = (await getPhoneNumber(code)).data.phoneNumber;
			if (!(await login())) {
				console.log('未注册');
				uni.navigateTo({
					url: '/pages/user/service/user_info/first_user_info?phone=' + phone
				});
			} else {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;
.container {
	background-color: #fff;
}
.body {
	padding: 40rpx;
}

.content {
	background-color: #f4f4f4;
	height: 40vh;
	margin: 30rpx 0 80rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 30rpx;
	padding: 40rpx;
	.logo {
		width: 150rpx;
		height: 150rpx;
	}
}

.login-btn {
	background-color: @theme-color;
	color: #ffffff;
	font-size: 30rpx;
	padding: 7rpx 0;
	border-radius: 100rpx;
}
</style>